<template>


  <div>
    <el-dialog :visible.sync="updateCompetition" append-to-body @close="cancel">
      <template>
        <el-form :model="updateForm" :rules="rules" ref="updateForm" label-width="100px" class="demo-updateForm">
          <el-form-item label="赛事名称" prop="name">
            <el-input v-model="updateForm.name" placeholder="请输入赛事名称" style="width:600px;"></el-input>
          </el-form-item>

          <el-form-item label="详细地址" prop="address">
            <el-input  v-model="updateForm.address" placeholder="请输入详细地址(XX街道)" style="width:600px;" ></el-input>
          </el-form-item>

          <el-form-item label="开始时间" required>
            <el-col :span="11">
              <el-form-item prop="startTime">
                <el-date-picker type="date" placeholder="选择日期" v-model="updateForm.startTime" :picker-options="pickerOptions" @change="changeData(true)" style="width: 400px;"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="截止时间" required>
            <el-col :span="11">
              <el-form-item prop="endTime">
                <el-date-picker type="date" placeholder="选择日期" v-model="updateForm.endTime" :picker-options="pickerOptions" @change="changeData(true)" style="width: 400px;"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item label="年龄段" required prop="ageType">
            <el-input  v-model="updateForm.ageType"  placeholder="请输入年龄段(XX岁以上/XX岁至XX岁)" style="width:350px;" ></el-input>
          </el-form-item>

          <el-form-item label="报名状态" required prop="status">
            <el-switch
              v-model="updateForm.status"
              active-value="1"
              inactive-value="0"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </el-form-item>

          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" autosize v-model="updateForm.remark" placeholder="1500个字符以内" style="width:600px;"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm('updateForm')">修改</el-button>
          <el-button @click="cancel" type="danger">关闭</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog :visible.sync="findCompetitionDetail" append-to-body @close="cancel">
      <template>
      <el-form ref="DetailData" :data="DetailData" label-width="100px" class="demo-ruleForm" style="margin: auto">

        <el-form-item label="赛事名称:" prop="name" >
          <el-input v-model="DetailData.name" readonly />
        </el-form-item>

        <el-form-item label="详细地址:" prop="address">
          <el-input v-model="DetailData.address" readonly/>
        </el-form-item>

        <el-form-item label="开始时间:" prop="startTime">
          <el-input v-model="DetailData.startTime" readonly/>
        </el-form-item>

        <el-form-item label="结束时间:" prop="endTime">
          <el-input v-model="DetailData.endTime" readonly/>
        </el-form-item>

        <el-form-item label="年龄段:" prop="ageType">
          <el-input v-model="DetailData.ageType" readonly/>
        </el-form-item>

        <el-form-item label="报名状态" prop="status">
          <el-switch  disabled
            v-model="DetailData.status"
            active-value="1"
            inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>

        <el-form-item label="创建人:" prop="ageType">
          <el-input v-model="DetailData.userName" readonly/>
        </el-form-item>

        <el-form-item label="备注:" prop="remark">
          <el-input type="textarea" autosize v-model="DetailData.remark" readonly>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel" type="danger">关闭</el-button>
      </div>
      </template>
    </el-dialog>

    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
      <el-form-item label="赛事名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入赛事名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="举办地址" prop="address">
        <el-input
          v-model="queryParams.address"
          placeholder="请输入举办地址"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
        <el-form-item label="报名状态" prop="status">
          <template>
            <el-select  v-model="queryParams.status" clearable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </template>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
  <el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName">
<!--    <el-table-column-->
<!--      prop="id"-->
<!--      label="赛事编号"-->
<!--      width="100">-->
<!--    </el-table-column>-->
    <el-table-column
      prop="name"
      label="赛事名称">
    </el-table-column>
    <el-table-column
        prop="address"
        label="赛事举办地址">
    </el-table-column>
    <el-table-column
      prop="startTime"
      label="赛事开始时间"
      width="180">
    </el-table-column>
    <el-table-column
      prop="endTime"
      label="赛事结束时间"
      width="180">
    </el-table-column>
    <el-table-column
      prop="ageType"
      label="年龄段"
      width="150">
    </el-table-column>
    <el-table-column
      prop="status"
      label="报名状态" width="100">
      <template slot-scope="scope">
        <span v-if="scope.row.status == 1 "style="color: forestgreen;">报名开启</span>
        <span v-if="scope.row.status == 0" style="color: red;">不可报名</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="createTime"
      label="赛事创建时间"
      width="150">
    </el-table-column>
<!--    <el-table-column-->
<!--      prop="userId"-->
<!--      label="创建人编号"-->
<!--      width="100">-->
<!--    </el-table-column>-->

    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" >
      <template slot-scope="scope">
        <el-button
          size="small" round
          icon="el-icon-view"
          @click="check(scope.row.id)"
        >查看详情 </el-button>
          <el-button v-hasRole="['admin','system']"
            size="small" round
            icon="el-icon-edit"
            @click="update(scope.row.id)"
          >修改 </el-button>
        <el-button v-hasRole="['admin','system']"
          size="small" round
          icon="el-icon-delete-solid"
          type="danger"
          @click="deleteCompetition(scope.row.id)"
        >删除 </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div>
  <pagination
    v-show="total>0"
    :total="total"
    :page.sync="queryParams.pageNum"
    :limit.sync="queryParams.pageSize"
    @pagination="getList"
  />
  </div>


  </div>

</template>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>

<script>
import {
  deleteCompetition,
  findCompetitionDetail,
  findCompetitionList,
  updateCompetition
} from "@/api/competition/Competition";
import ScrollPane from "@/layout/components/TagsView/ScrollPane";

export default {
  components: {ScrollPane},
  data() {
    return {
      options: [{value: '1', label: '报名开启'},{value: '0', label: '不可报名'}],
      findCompetitionDetail:false,
      updateCompetition:false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 默认排序
      defaultSort: {prop: 'operTime', order: 'descending'},
      // 表单参数
      form: {},
      tableData: [],
      DetailData: [],
      rules: {
        status:[],
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        address: [
          { required: true, message: '请输入具体地址', trigger: 'change' }
        ],
        ageType: [
          { required: true, message: '请输入相应年龄段', trigger: 'blur' }
        ],
        startTime: [
          {required: true, message: '请选择日期', trigger: 'change' }
        ],
        endTime: [
          { required: true, message: '请选择时间', trigger: 'change' }
        ],
        remark: [
          { message: '请选择时间', trigger: 'change' },
          {max: 1500, message: '1500个字符以内', trigger: 'blur' }
        ],
      },
      pickerOptions: {
        disableDate: time => {
          return time.getTime() > Date.now();
        }
      },
      remark:null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name:null,
        address:null,
        status:null,
      },
      updateForm: {
        name: '',
        address :'',
        startTime: '',
        endTime: '',
        ageType:'',
        remark: '',
        userId:'',
        status: '',
      },
    }
  },
  methods: {
    changeData(flag) {
      if (flag) {
        if (this.ruleForm.endTime) {
          if (this.ruleForm.startTime > this.ruleForm.endTime) {
            this.ruleForm.startTime = null;
            this.$message.error("开始时间不能大于结束时间！");
          }
        }
      } else {
        if (this.ruleForm.startTime) {
          if (this.ruleForm.startTime > this.ruleForm.endTime) {
            this.ruleForm.endTime = null;
            this.$message.error("结束时间不能小于开始时间！");
          }
        }
      }
    },
    // 取消按钮
    cancel() {
      this.findCompetitionDetail = false;
      this.updateCompetition = false;
      this.reset();
      this.DetailData = [];
    },
    // 表单重置
    reset() {
      this.form = {
        name:null,
        address:null,
        startTime:null,
        endTime:null,
        ageType:null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      console.log('搜索')
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    /** 查询所有赛事列表 */
    getList() {
      console.log("即将加载列表");
      this.loading = true;
      // this.queryParams.projectCode = this.currentProject;
      findCompetitionList(this.queryParams).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /**
     * 查看赛事详情
     * @param id
     */
    check(id){
      console.log("查看赛事详情");
      this.findCompetitionDetail = true
      findCompetitionDetail(id).then(response => {
        this.DetailData = response.data;
      });
    },
    update(id){
      console.log("修改前查看赛事详情");
      this.updateCompetition = true
      findCompetitionDetail(id).then(response => {
        this.updateForm = response.data;
        console.log(this.updateForm);
      });
    },
    deleteCompetition(id){
      this.$confirm('此操作将永久删除该赛事, 是否继续?', '请注意', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'error',
        center: true
      }).then(() => {
        deleteCompetition(id).then(response => {
        });
        this.$message({
          type: 'success',
          message: '删除赛事成功!'
        },
        this.getList()
        );
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: '已取消删除!'
        });
      });

    },
    submitForm() {
      this.$refs["updateForm"].validate((valid) => {
        if(valid){
          updateCompetition(this.updateForm).then(response => {
            this.$modal.msgSuccess("修改成功!");
            this.open = false;
          });
          this.cancel();
          this.getList();
        }else{
          alert("您还有选项没有填写!")
        }
      });
    },

  },
  mounted() {
    this.getList();
  }
}
</script>

